<template>
    <view style="height: 100%">
        <!-- pages/tests/tests.wxml -->
        <view class="page-body">
            <view class="page-section">
                <view class="weui-cells__title">可以自动聚焦的input</view>
                <view class="weui-cells weui-cells_after-title">
                    <view class="weui-cell weui-cell_input">
                        <input class="weui-input" auto-focus placeholder="将会获取焦点" />
                    </view>
                </view>
            </view>
            <view class="page-section">
                <view class="weui-cells__title">控制最大输入长度的input</view>
                <view class="weui-cells weui-cells_after-title">
                    <view class="weui-cell weui-cell_input">
                        <input class="weui-input" maxlength="10" placeholder="最大输入长度为10" />
                    </view>
                </view>
            </view>
            <view class="page-section">
                <view class="weui-cells__title">实时获取输入值：{{ inputValue }}</view>
                <view class="weui-cells weui-cells_after-title">
                    <view class="weui-cell weui-cell_input">
                        <input class="weui-input" maxlength="10" @input="bindKeyInput" placeholder="输入同步到view中" />
                    </view>
                </view>
            </view>
            <view class="page-section">
                <view class="weui-cells__title">控制输入的input</view>
                <view class="weui-cells weui-cells_after-title">
                    <view class="weui-cell weui-cell_input">
                        <input class="weui-input" @input="bindReplaceInput" placeholder="连续的两个1会变成2" />
                    </view>
                </view>
            </view>
            <view class="page-section">
                <view class="weui-cells__title">控制键盘的input</view>
                <view class="weui-cells weui-cells_after-title">
                    <view class="weui-cell weui-cell_input">
                        <input class="weui-input" @input="bindHideKeyboard" placeholder="输入123自动收起键盘" />
                    </view>
                </view>
            </view>
            <view class="page-section">
                <view class="weui-cells__title">数字输入的input</view>
                <view class="weui-cells weui-cells_after-title">
                    <view class="weui-cell weui-cell_input">
                        <input class="weui-input" type="number" placeholder="这是一个数字输入框" />
                    </view>
                </view>
            </view>
            <view class="page-section">
                <view class="weui-cells__title">密码输入的input</view>
                <view class="weui-cells weui-cells_after-title">
                    <view class="weui-cell weui-cell_input">
                        <input class="weui-input" password type="text" placeholder="这是一个密码输入框" />
                    </view>
                </view>
            </view>
            <view class="page-section">
                <view class="weui-cells__title">带小数点的input</view>
                <view class="weui-cells weui-cells_after-title">
                    <view class="weui-cell weui-cell_input">
                        <input class="weui-input" type="digit" placeholder="带小数点的数字键盘" />
                    </view>
                </view>
            </view>
            <view class="page-section">
                <view class="weui-cells__title">身份证输入的input</view>
                <view class="weui-cells weui-cells_after-title">
                    <view class="weui-cell weui-cell_input">
                        <input class="weui-input" type="idcard" placeholder="身份证输入键盘" />
                    </view>
                </view>
            </view>
            <view class="page-section">
                <view class="weui-cells__title">控制占位符颜色的input</view>
                <view class="weui-cells weui-cells_after-title">
                    <view class="weui-cell weui-cell_input">
                        <input class="weui-input" placeholder-style="color:#F76260" placeholder="占位符字体是红色的" />
                    </view>
                </view>
            </view>
        </view>
        <view class="section">
            <textarea @blur="bindTextAreaBlur" auto-height placeholder="自动变高" />
        </view>
        <view class="section">
            <textarea placeholder="placeholder颜色是红色的" placeholder-style="color:red;" />
        </view>
        <view class="section">
            <textarea placeholder="这是一个可以自动聚焦的textarea" auto-focus />
        </view>
        <view class="section">
            <textarea placeholder="这个只有在按钮点击的时候才聚焦" :focus="focus" />
            <view class="btn-area">
                <button @tap="bindButtonTap">使得输入框获取焦点</button>
            </view>
        </view>
        <view class="section">
            <form @submit="bindFormSubmit">
                <textarea placeholder="form 中的 textarea" name="textarea" />
                <button form-type="submit">提交</button>
            </form>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            focus: false,
            height: 20,
            inputValue: ''
        };
    },
    methods: {
        bindKeyInput: function (e) {
            this.setData({
                inputValue: e.detail.value
            });
        },

        bindReplaceInput: function (e) {
            var value = e.detail.value;
            var pos = e.detail.cursor;
            var left;
            if (pos !== -1) {
                // 光标在中间
                left = e.detail.value.slice(0, pos);
                // 计算光标的位置
                pos = left.replace(/11/g, '2').length;
            }

            // 直接返回对象，可以对输入进行过滤处理，同时可以控制光标的位置
            return {
                value: value.replace(/11/g, '2'),
                cursor: pos
            };

            // 或者直接返回字符串,光标在最后边
            // return value.replace(/11/g,'2'),
        },

        bindHideKeyboard: function (e) {
            if (e.detail.value === '123') {
                // 收起键盘
                uni.hideKeyboard();
            }
        },

        bindButtonTap: function () {
            this.setData({
                focus: true
            });
        },

        bindTextAreaBlur: function (e) {
            console.log(e.detail.value);
        },

        bindFormSubmit: function (e) {
            console.log(e.detail.value.textarea);
        }
    }
};
</script>
<style>
/* pages/tests/tests.wxss */
</style>
